<template>
  <div class="container">
     <a-layout >
       <a-layout-content>
         <a-breadcrumb style="margin: 16px 0">
           <a-breadcrumb-item>首页</a-breadcrumb-item>
           <a-breadcrumb-item>个人中心</a-breadcrumb-item>
		   <a-breadcrumb-item> <a-icon
		             class="trigger"
		             :type="collapsed ? 'menu-unfold' : 'menu-fold'"
		             @click="() => (collapsed = !collapsed)"
		           /></a-breadcrumb-item>
		 
         </a-breadcrumb>
         <a-layout style="padding: 24px 0; background: #fff">
           <a-layout-sider v-model="collapsed" :trigger="null" collapsible style="background: #fff">
             <a-menu
               mode="inline"
               :default-selected-keys="['1']"
               :default-open-keys="['sub1']"
               style="height: 100%"
             >
               <a-sub-menu key="sub1">
                 <span slot="title"><a-icon type="user" />个人中心</span>
                 <a-menu-item key="1">
                   发布列表
                 </a-menu-item>
				 <a-menu-item key="2">
				   我的浏览
				 </a-menu-item>
               </a-sub-menu>
               <a-sub-menu key="sub2">
                 <span slot="title"><a-icon type="laptop" />设置</span>
                 <a-menu-item key="5">
                   修改手机号
                 </a-menu-item>
				 <a-menu-item key="6">
				   个人资料
				 </a-menu-item>
               </a-sub-menu>
               <a-sub-menu key="sub3">
                 <span slot="title"><a-icon type="notification" />帮助中心</span>
                 <a-menu-item key="9">
                   帮助中心
                 </a-menu-item>
                 <a-menu-item key="10">
                   客服电话
                 </a-menu-item>
               </a-sub-menu>
             </a-menu>
           </a-layout-sider>
           <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
             Content
           </a-layout-content>
         </a-layout>
       </a-layout-content>
     </a-layout>
  </div>
</template>
<script>
// 例如：import 《组件名称》 from '《组件路径》'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      title: '测试',
	  collapsed: false,
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {
  },
  // 生命周期 - 创建之前
  beforeMount() {
  },
  // 生命周期 - 挂载之前
  beforeUpdate() {
  },
  // 生命周期 - 更新之前,
  updated() {
  },
  // 生命周期 - 更新之后
  beforeDestroy() {
  },
  // 生命周期 - 销毁之前
  destroyed() {
  },
  // 生命周期 - 销毁完成
  activated() {
  },
  // 方法集合
  methods: {}
  // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped></style>
